<!DOCTYPE html>
<html lang="en">
<head>
    <title>管理系统 - 管理中心</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <meta ng-include="'head.html'"> -->
    <style type="text/css">
        select{ height:25px;  }
        #myModalLabel{ height:35px;}
        #editForm{overflow-x:hidden;overflow-y:auto; max-height:500px}
        ul>li>a{ cursor: pointer;}
    </style>
    <script src="../lib/js/jquery.min.js" type="text/javascript"></script>
    <script src="../js/build.js" type="text/javascript"></script>
    <script src="../js/public.js" type="text/javascript"></script>
</head>
<body class="flat-blue">
<div class="app-container" ng-app="myApp" ng-controller="myCtrl">
<div class="row content-container">
<div ng-include="'menus.html'" onload="loadReady()"></div>
<div class="container-fluid">
<div class="side-body padding-top pb15" id="main" style="margin-bottom:10px">
    <!------------------Main---------------->
    <div style="width:97%; margin:0px 15px 15px 15px;">
        <table class="table" style="background-color:#fff" data-show-toggle="false" 
            data-expand-first="true">
        <thead>
            <tr>
                <th ng-repeat="col in cols" ng-class="colClass[col.field]">{{col.name}}</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        
            <tr ng-repeat="row in rows">
                <td ng-repeat="col in cols">{{row[col.field]}}</td>
                <td>
                    <button ng-click="editRow($index)" class="bt btn btn-info btn-xs" data-toggle="modal" data-target="#myModal1">
                        <span class="glyphicon glyphicon-edit"></span> 编辑
                    </button>
                </td>
            </tr>
        </tbody>
        </table>
        <div style="margin-bottom:30px" align="center">
            <ul class="pagination">
                <li><a ng-click="Page.pagePre()">&laquo;</a></li>
                <li ng-repeat="pIndex in Page.pagePool" 
                    ng-class="{active: Page.pageIndex==pIndex}">
                    <a ng-click="loadDevice(pIndex)">{{pIndex + 1}}</a>
                </li>
                <li><a ng-click="Page.pageNext()">&raquo;</a></li>
            </ul>
        </div>

        <!-- 模态框 For Edit Row -->
        <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" 
            aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header" style="height:40px">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <p style="font-size:14px" class="modal-title" id="myModalLabel">编辑</p>
                    </div>
                    <!--核心内容-->
                    <div class="modal-body" style="min-height: 250px; ">
                        <div compile="formTpl" id="editForm" style="" ></div>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
        <!-- End 模态框 For Edit List -->

    </div>
    <!------------------End Main---------------------->
</div>  <!--End side-body-->
</div>  <!--End container-fluid-->
</div>  <!--End content-container-->
<div ng-include="'footer.html'"></div>
</div>  <!--End app-container-->

<script type="text/javascript" src="../js/page.js"></script>
<script type="text/javascript" src="../js/editDevice.js"></script>

<script language="javascript">
    var app = angular.module('myApp', []);
    app.directive('compile', function ($compile) {
        return function (scope, element, attrs) {
            scope.$watch(
              function (scope) { return scope.$eval(attrs.compile); },
              function (value) {
                  element.html(value);
                  $compile(element.contents())(scope);
              }
            );
        };
    });        

    app.controller('myCtrl', function($scope) {
        loadCtlBase($scope);
        //// 模态编辑窗口
        $scope.formTpl = getEditDeviceTpl.txtContent();
        $scope.hideCols = {"id":1, "user":1, "updateTime":1};
        //// 单条数据
        $scope.line = {"type":"工业", "productionStatus":"未投产"};
        //// 地址信息·支持多字段
        $scope.Addrs = {};
        $scope.cols = [];
        $scope.rows = [];
        //// 待编辑的项
        $scope.line = {};   
        $scope.colClass = {};
        
        $scope.Page = new Page();
        $scope.Page.init();      

        ajaxData("get_form", {"user":'David'}, function(rst){
            var items = rst.data.rows; 
            $scope.selOptions = rst.data.options;
            items.forEach(function(d){
                d['editFlag'] = [1,1];
                $scope.colClass[d.field] = "";
                if(d.type=="address"){
                    if(d.field=="address"){
                        $scope.cols.push({"field":"province", "name":"省"});
                        $scope.cols.push({"field":"city", "name":"市"});
                        $scope.cols.push({"field":"county", "name":"县级"});
                    }
                    //// 地址联动组件，selProvince， selCity， selCounty为选择或设置的值
                    $scope.Addrs[d.field] = {"selProvince":"", "selCity":"", "selCounty":""};
                }
                if(!(d.field in $scope.hideCols))$scope.cols.push(d);
            });
            //// 加载地址控件
            loadAddrs($scope, $scope.Addrs);
            $scope.loadDevice();
            $scope.colClass["address"] = "W10";
            $scope.colClass["mark"] = "W10";
            $scope.$apply();
        });

        $scope.loadDevice = function (page){
            if(!page) page = 0; 
            $scope.Page.pageIndex = page;
            $scope.rows = [];
            ajaxData("get_devices", {"user":'David', 'page':page}, function(rst){ 
                var dt = rst.data.rows;
                $scope.Page.pageSize = rst.data.pageSize;
                $scope.Page.pageCount = rst.data.pageCount;
                $scope.Page.init();
                dt.forEach(function(item){
                    $scope.rows.push(collectRow($scope, item));    
                });
            
                //cout($scope.rows);
                //cout($scope.line)
                $scope.$apply();
                return;
            });    
        }
        //// 编辑条目，将加载模态框
        $scope.editRow = function(index){
            var row = $scope.rows[index];
            $scope.line = {'rIndex':index};
            for(var key in row) $scope.line[key] = row[key];
        } 

        $scope.Submit = function(){
            SubmitRow($scope, $scope.line, function(dt){
                for(var key in $scope.line){
                    var i = $scope.line['rIndex'];
                    if(key!=="$$hashKey")$scope.rows[i][key] = $scope.line[key];
                }
                $("#myModal1").modal('hide');
                $scope.$apply();
            });
        };


    });

    app.directive('onFinishRenderFilters', FinishRenderFilters);  



</script>

</body>
</html>
